<template>
    <div>
        <nav-bar title="我的地址"></nav-bar>
        
        <div class="address-list">
            <div class="address-item" v-for="item in addressList" :key="item.id">
                <div class="has-default"></div>
                <div class="info">
                    <div class="user-info">
                        <span>{{item.name}}</span>
                        <span>{{item.phoneNumber}}</span>
                    </div>
                    <div class="address-info">
                        <span>{{(item.province + item.city + item.region + item.address)}}</span>
                    </div>
                </div>
                <div class="edit" @click="goto(1, item)">
                    <van-icon name="records" size="20"/>
                </div>
            </div>
        </div>

        <div class="button-box">
            <van-button type="info" size="large" round @click="goto(0)">添加地址</van-button>
        </div>

    </div>
</template>

<script>
import NavBar from '@/components/navbar/NavBar.vue';

import address from '@/api/address'
export default {
    components:{NavBar},
    data() {
        return {
            addressList: [],
        }
    },
    created() {
        this.getAddress(1)
    },
    methods: {
        getAddress(current) {
            let data = {
                current,
            }
            address.getAddress(data)
                .then(res => {
                    if (res.code == 200) {
                        this.addressList = res.data.addressList.records
                    } else {
                        this.$toast(res.message)
                    }
                })
        },
        goto(type, item){

            if(type == 1){
                sessionStorage.setItem('address', JSON.stringify(item))
            }

            this.$router.push({
                name: 'addressEdit',
                params:{
                    type,
                }
            })
        }
    }
}
</script>

<style scoped>

.address-item{
    width:90%;
    margin:auto;

    display:flex;
    align-items:center;
    text-align:left;

    margin-top:8px;
    margin-bottom: 8px;

    background-color:white;

    padding:10px;

    border-radius: 8px;;
}

.address-item .info{
    flex: 1;
}
.address-item .user-info{
    font-size:14px;
}

.address-item .address-info{
    color:gray;
    margin-top:5px;
}

.user-info span{
    margin-right: 10px;;
}

.button-box{
    margin-top:20px;
    position: fixed;
    bottom:10px;
    width:100%;
}
</style>